<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器的组合定义</title>
    <style>
        /*!*组合选择*!*/
        h1,h2,p {
            color: red;
        }
        /*div p {*/
            /*color: red;*/
        /*}*/
        /*!*属性组合*!*/
        /*h1[title] {*/
            /*color:green;*/
        /*}*/
        /*后代选择器*/
        /*div.market2 p{*/
            /*color: red;*/
        /*}*/
        /*子选择器*/
        /*.market2>p {*/
            /*color: red;*/
        /*}*/
        /*.market {*/
            /*color: red;*/
        /*}*/
        /*相邻兄弟选择器*/
        /*选择在div闭合标签之后，跟div有直接相邻关系的p*/
        /*div+p {*/
            /*color: red;*/
        /*}*/
        /*p+div {*/
            /*color:red;*/
        /*}*/
        /*普通兄弟选择器*/
        /*没有相邻这个规则硬性要求，只要是div闭合标签之后的p*/
        /*div~p {*/
            /*color: red;*/
        /*}*/
        .market {
            color: darkred;
        }
        .market2 {
            font-size: x-large;
        }
    </style>
</head>
<body>
<div  class = "market market2">
    <p>这是第一个段落</p>
    <i>这是斜体字</i>
</div>
<p class="market">这是外部段落 </p>
<div class="market2">
    <div>
        <p>这是嵌套层里面的div</p>
    </div>
    <!--直属于market2下的p 才会被选中-->
    <i>这是第二个斜体</i>>
    <p>这是div内部的第二个段落</p>
    <p>这是div内部的第三个段落</p>
</div>
<p title="titlep">这是外部的第二个段落</p>
<h1 title="titleh1">这是第一个标题</h1>
<h1 title="titleh12">这是第一个标题2</h1>
<h1>这是标题</h1>
<h2 title="titleh2">这是第二个标题</h2>
<p title="titlep">这是外部的第三个段落</p>
</body>
</html>